<template>
	<div class="All">
		<h2>
			<el-page-header @back="$utils.goBack()" content="所有课程">
			</el-page-header>
		</h2>
		<el-divider></el-divider>
		<el-table
			:data="tableData"
			stripe
			border
			style="width: 100%"
			ref="filterTable">
			<el-table-column
				label="操作"
				fixed="left"
				align="center"
				width="240">
				<template slot-scope="scope">
					
					<el-popover
						placement="top"
						title="提示"
						width="200"
						trigger="hover"
						content="更新课程主体的相关信息，注意是否收费在创建后已经不允许再被修改。">
						<el-button @click="EditCourse(scope.$index, scope.row)"
						           slot="reference"
						           icon="el-icon-edit"></el-button>
					</el-popover>
					
					<el-popover
						placement="top"
						title="提示"
						width="200"
						trigger="hover"
						content="为该课程上传更新更多的学习视频，注意视频较大时候不要刷新页面，请耐心等待上传结束！">
						<el-button type="success"
						           slot="reference"
						           @click="UpdateVideo(scope.$index, scope.row)"
						           class="el-icon-upload">
						</el-button>
					</el-popover>
					
					
					<el-popover
						placement="top"
						title="提示"
						width="200"
						trigger="hover"
						content="删除本课程和该课程下所属的所有视频，删除请三思！">
						<el-button type="danger"
						           slot="reference"
						           @click="DeleteCourse(scope.$index, scope.row)"
						           icon="el-icon-delete"></el-button>
					</el-popover>
					
					
			
				</template>
			</el-table-column>
			<el-table-column
				prop="courseTitle"
				label="课程名"
				align="center"
				width="120">
			</el-table-column>
			<el-table-column
				prop="courseImageUrl"
				label="课程缩略图"
				align="center"
				width="130">
				<template   slot-scope="scope">
					<a :href="scope.row.courseImageUrl" target="_blank">
						<img :src="scope.row.courseImageUrl" height="70" :alt="scope.row.courseTitle" />
					</a>
				</template>
			</el-table-column>
			<el-table-column
				prop="courseDesc"
				width="160"
				label="课程介绍">
			</el-table-column>
			<el-table-column
				prop="courseClass"
				label="课程分类"
				align="center"
				width="120">
			</el-table-column>
			<el-table-column
				prop="courseDate"
				label="发布时间"
				align="center"
				width="110">
			</el-table-column>
			<!--<el-table-column-->
				<!--prop="status"-->
				<!--label="课程状态"-->
				<!--:filter-multiple="false"-->
				<!--:filters="[{ text: '正在更新', value: '正在更新' }, { text: '已经结', value: '已经结' }]"-->
				<!--:filter-method="filterStatus"-->
				<!--width="100">-->
				<!--<template slot-scope="scope">-->
					<!--<el-tag-->
						<!--:type="scope.row.status === '正在更新' ? 'primary' : 'success'"-->
						<!--close-transition>{{scope.row.status}}</el-tag>-->
				<!--</template>-->
			<!--</el-table-column>-->
			<el-table-column
				prop="courseCharge"
				column-key="tag"
				label="是否付费"
				align="center"
				width="110"
				:filter-multiple="false"
				:filters="[{ text: '收费', value: '收费' }, { text: '免费', value: '免费' }]"
				:filter-method="filterTag"
				filter-placement="bottom-end">
				<template slot-scope="scope">
					<el-tag
						:type="scope.row.courseCharge === '收费' ? 'primary' : 'success'"
						close-transition>{{scope.row.courseCharge}}</el-tag>
				</template>
			</el-table-column>
		
			<el-table-column
				prop="coursePrice"
				label="价格(元)"
				align="center"
				width="90">
			</el-table-column>
			<el-table-column
				prop="courseResource"
				label="难易度"
				align="center"
				width="90">
			</el-table-column>
		</el-table>
		
		<el-container>
			<el-main>
				<el-pagination
					class="page-pagination"
					:page-size="10"
					:pager-count="5"
					background
					layout="prev, pager, next"
					:total="100">
				</el-pagination>
			</el-main>
		</el-container>
	
		
	</div>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator"
	
	
	@Component
	export default class AllComponents extends Vue {
		public tableData:Array<Object> = [];
		public page: number = 0;
		
		
		created () {
			this.getAllCourseData();
		}
		
		/**
		 * 获取所有视频的信息
		 */
		public async getAllCourseData(): void {
			let allCourse = await this.$http.post({
				url: '/admin/getAllCourse',
				params: { page: this.page }
			});
			this.tableData = allCourse.result
		}
		
		/**
		 * 进入 编辑课程主体信息 的页面
		 * @param index
		 * @param row
		 */
		public EditCourse (index:number,row:object): void {
			this.$router.push({ name: 'new', query: { id: row.objectId }})
		}
		
		/**
		 * 进入 更新课程的视频信息 的页面
		 * @param index
		 * @param row
		 */
		public async UpdateVideo (index:number, row:object):void {
			this.$router.push({
				name: 'video',
				params: {
					id: row.objectId
				},
				query: {
					_: (Date.parse(new Date())).toString()
				}
			})
		}

		/**
		 * 删除课程和视频 的事件
		 * @param index
		 * @param row
		 */
		public async DeleteCourse(index:number, row:object):void {
			console.log(index,row);
			this.$confirm(`确认删除课程和课程下所有视频吗？请三思...！`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				
				let deletes = await this.$http.post({
					url: '/admin/deleteCourseAndVideo',
					params: {id: row.objectId}
				});
				this.tableData.splice(index,1);
				
				
				this.$notify({
					title: '提示',
					message: '视频章节删除成功',
					type: 'success'
				});
				
			}).catch(() => {
			});
		}

		/**
		 * 过滤收费、免费
		 * @param value
		 * @param row
		 */
		public filterTag(value:string, row:object): boolean {
			return row.courseCharge == value;
		}
	}
</script>

<style scoped lang="less">

</style>